<template>
  <div class="list-control">
    <a href="javascript:;"  @click.stop.prevent="removeCart()">
      <icon symbol="min"></icon>
    </a>
    <span>{{goodsNum}}</span>
    <a href="javascript:;"  @click.stop.prevent="addCart()">
      <icon symbol="add"></icon>
    </a>
  </div>
</template>
<script lang="babel">
  import Icon from '@components/icon'
  import {mapGetters} from 'vuex'
  export default {
    components: {
      Icon
    },
    props: ['goods', 'shop'],
    computed: {
      ...mapGetters({
        getCart: 'frontend/cart/getCart'
      }),
      goodsNum() {
        let _this = this;
        let shopId = this.shop;
        let initNum = 0
        if (this.getCart[shopId]) {
          let goodsFilter = this.getCart[shopId].goods.filter((item) => {
            return item.goSn === _this.goods.goSn
          })
          goodsFilter.forEach((item)=>{
            initNum += item.goNum
          })
        }
        return initNum;
      }
    },
    mounted () {
    },
    methods: {
      addCart(event) {
        this.$store.dispatch('frontend/cart/addCart', this.goods);
      },
      removeCart() {
        this.$store.dispatch('frontend/cart/removeCart', this.goods);
      }
    }
  }
</script>